<template>
  <view class="page">
    <!-- 进度条 -->
    <view class="padding-lr-sm">
      <up-line-progress :percentage="20 * state.step" activeColor="#8DB82E" height="30rpx" :showText="false"
        v-if="state.step < state.totalStep"></up-line-progress>
    </view>
    <!--1、选择身份 -->
    <view class="main padding-lr-sm" v-if="state.step === 1">
      <up-text size="28" color="#2B2626" weight="400" margin="46rpx 0 0 0" text="请选择您的身份" align="center"></up-text>

      <view class="margin-top-sm padding-tb bg-white flex radius justify-center align-center"
        :class="registInfo.userIdentity === item.id ? 'bg-second-primary' : 'bg-white'"
        v-for="(item, index) in state.roleList" :key="index" @click="registInfo.userIdentity = item.id">
        <image style="width: 100px; height: 100px; margin-right: 10rpx" :src="item.icon">
        </image>
        <view>
          <up-text :color="registInfo.userIdentity == item.id ? '#fff' : '#2B2626'" size="28" :text="item.name">
          </up-text>
        </view>
      </view>
    </view>
    <!--2、选择家长 -->
    <view class="main" v-if="state.step === 2">
      <up-text size="20" color="#2B2626" weight="400" margin="46rpx 0 0 0" text="您是哪位家长" align="center"></up-text>

      <view class="margin-lr-sm margin-top-sm padding-tb bg-white flex radius justify-center align-center"
        :class="registInfo.fubei === item.id ? 'bg-second-primary' : 'bg-white'"
        v-for="(item, index) in state.parentsList" :key="index" @click="registInfo.fubei = item.id">
        <image style="width: 100px; height: 100px; margin-right: 10rpx" :src="item.icon">
        </image>
        <view>
          <up-text :color="registInfo.fubei == item.id ? '#fff' : '#2B2626'" size="28" :text="item.name">
          </up-text>
        </view>
      </view>
      <view class="margin-lr-sm margin-top-sm padding-tb-xl bg-white flex radius justify-center align-center"
        @click="addParents">
        <up-text size="30" text="+" align="center">
        </up-text>
      </view>
    </view>
    <!--3、选择孩子数量 -->
    <view class="main" v-if="state.step === 3">
      <up-text size="20" color="#2B2626" weight="400" margin="46rpx 0 0 0" text="您家有几个宝贝？" align="center"></up-text>
      <up-text size="14" color="#B7B7B7" weight="400" text="为了给您提供贴心的服务，请您选择孩子的数量。" align="center"></up-text>
      <view class="bg-white radius-lg margin-top-xl" style="padding: 300rpx 30rpx">
        <view class="children-num-bar" @click="state.showSelectChildCount = true">
          {{ registInfo.childrenCount == 0 ? '选择宝贝数量' : registInfo.childrenCount }}
        </view>
        <up-picker title="宝贝数量" :show="state.showSelectChildCount" :options="countList" :columns="countList"
          @confirm="changeChildrenCount"></up-picker>
      </view>
    </view>
    <!--4、设置昵称和选择性别 -->
    <view class="main" v-if="state.step === 4">
      <up-text size="28" color="#2B2626" weight="400" margin="46rpx 0 0 0" text="请选择小朋友的性别" align="center"></up-text>
      <view class="flex justify-center margin-tb" style="height: 156px">
        <image :src="`${IMAGE_URL}${registInfo.sex === 1
          ? '/profile/content/2025/04/28/kMTk1KgLHBdoc948cab5bf14490df9d142be00d82eb2_20250428141815A002.png'
          : '/profile/content/2025/04/28/n6eVNhK19FSQ0889c47942285ae807a2959e9c7c92e1_20250428141907A004.png'
          }`" style="width: 156px; height: 156px" v-if="registInfo.sex !== ''"></image>
        <up-avatar :src="IMAGE_URL +
          '/profile/content/2025/05/16/swH1UkXIzCFx372e10308bdcb1eba63adfc8849ebc2a_20250516133018A007.png'
          " size="156px" v-if="registInfo.sex === ''"></up-avatar>
      </view>

      <view class="cus-input">
        <up-input placeholder="请输入内容" border="none" v-model="registInfo.nickname" inputAlign="center"
          fontSize="24px"></up-input>
      </view>

      <view class="radio-group">
        <view class="radio-item" :class="registInfo.sex === 0 ? 'girl' : ''" @click="registInfo.sex = 0">
          女孩
        </view>
        <view class="radio-item" :class="registInfo.sex === 1 ? 'boy' : ''" @click="registInfo.sex = 1">
          男孩
        </view>
      </view>
    </view>
    <!-- 5、生成专属芽号 -->
    <view class="main flex flex-direction align-center justify-center" v-if="state.step === 5">
      <view style="width: 100%">
        <up-text size="28" color="#333333" weight="400" :text="`${registInfo.nickname}专属芽号`" align="center"></up-text>

        <view class="student-id-box flex justify-center">
          <up-text color="#6D9319" :size="30" weight="500" :text="registInfo.showId" margin="0 0 0 40rpx"></up-text>
          <text class="copy-text" @click="copy">
            复制芽号
          </text>
        </view>
      </view>
    </view>
    <!-- 底部操作按钮 -->
    <view class="footer">
      <u-button type="primary" text="上一步" color="#8DB82E" size="large" :disabled="!registInfo.userIdentity"
        @click="handlePrev" customStyle="height:88rpx" v-if="state.step > 1 && state.step < state.totalStep" />
      <u-button type="primary" text="下一步" color="#8DB82E" size="large" :disabled="!canHandleNext" @click="handleNext"
        :customStyle="`max-width: 60%;height:88rpx ;${state.step > 1 ? 'margin-left:10rpx' : ''}`"
        v-if="state.step < state.totalStep" />
      <u-button type="primary" text="完成" color="#8DB82E" size="large" v-if="state.step === state.totalStep"
        @click="addStudent" />
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { regUserApi, genYCodeApi } from '@/api/api';
import { getUserInfoApi, addStudentApi } from '@/api/me';
import { setUserInfo } from '@/utils/auth';
import { IMAGE_URL } from '@/utils/env';
const state = reactive({
  step: 1,
  roleList: [
    {
      id: 1,
      name: '老师',
      icon:
        IMAGE_URL +
        '/profile/content/2025/05/16/jAKvYivbZDbE7535db30979a605fbce298dcf370b117_20250516132026A004.png'
    },
    // {
    //   id: 'tutor',
    //   name: '家教',
    //   icon: '/static/images/icon-home-teacher.png'
    // },
    {
      id: 3,
      name: '家长',
      icon:
        IMAGE_URL +
        '/profile/content/2025/05/16/L2f95Pjfcfa412431ce637324356b712370f9a07b1b1_20250516131137A002.png'
    }
  ],
  parentsList: [
    {
      id: 2,
      name: '妈妈',
      icon:
        IMAGE_URL +
        '/profile/content/2025/05/16/eL7rIywqSybb89511c0160b5508d6d3a43c8e721c4c3_20250516112042A001.png'
    },
    {
      id: 1,
      name: '爸爸',
      icon:
        IMAGE_URL +
        '/profile/content/2025/05/16/GjTfZt8hho6ffc3640dca4495fe7b4fc9a130d68f5c6_20250516131955A003.png'
    }
    // {
    //   id: 'parent',
    //   name: '家教老师',
    //   icon: '/static/images/icon-parent.svg'
    // }
  ],
  showSelectChildCount: false,
  totalStep: 5
});

// 注册
const registInfo = reactive({
  userIdentity: '', //选择的角色
  fubei: '', //选择的家长
  nickname: '', //昵称
  sex: '', //性别,
  showId: '', //孩子的芽号
  yourShowId: '', //注册人的芽号
  childrenCount: 0 //孩子数量
  // avatar: '',
  // grade:'1'
});

const countList = ref([[1, 2, 3, 4]]);
const canHandleNext = computed(() => {
  if (state.step === 1) {
    return registInfo.userIdentity;
  } else if (state.step === 2) {
    return registInfo.fubei;
  } else if (state.step === 3) {
    return registInfo.childrenCount;
  } else if (state.step === 4) {
    return registInfo.nickname && (registInfo.sex === 0 || registInfo.sex === 1);
  }
});

// 上一步
const handlePrev = () => {
  state.step--;
};
// 下一步
const handleNext = () => {
  switch (state.step) {
    case 1:
      if (registInfo.userIdentity === 3) {
        state.step++;
      } else {
        uni.navigateTo({
          url: '/pages-sub/teacher/teacherInfo'
        });
      }
      break;
    case 3:
      genYCode('parent');
      break;
    case 4:
      genYCode('child');
      break;
    default:
      state.step++;
      break;
  }
};

// 生成芽号
// type:[parent,child]
// parent:父母
// child:孩子
const genYCode = async (type) => {
  const result = await genYCodeApi();
  if (result.code === 200) {
    if (type == 'parent') {
      registInfo.yourShowId = result.msg;
      submit();
    } else {
      registInfo.showId = result.msg;
      state.step++;
    }
    console.log(result);
  }
};
const submit = async () => {
  const params = {
    fubei: registInfo.fubei,
    // nickname: '小明',
    yourShowId: registInfo.yourShowId,
    // avatar: 'string',
    childrenCount: registInfo.childrenCount
  };
  const result = await regUserApi(params);
  if (result.code == 200) {
    // uni.showToast({
    //   title: '注册成功',
    //   icon: 'none'
    // });
    getUserInfo();
    state.step++;
  } else {
    // uni.showToast({
    //   title: result.msg,
    //   icon: none
    // });
  }
};

const addStudent = async () => {
  const params = {
    sex: registInfo.sex,
    nickname: registInfo.nickname,
    // grade: '1',
    showId: registInfo.showId
    // avatar: 'string'
  };
  const result = await addStudentApi(params);
  if (result.code === 200) {
    registInfo.childrenCount--;
    uni.showToast({
      title: '添加成功',
      icon: 'none'
    });
    if (registInfo.childrenCount > 0) {
      registInfo.nickname = '';
      registInfo.sex = '';
      state.step = 4;
    } else {
      uni.navigateTo({
        url: '/pages-sub/question/index'
      });
    }

  }
};

const getUserInfo = async () => {
  const result = await getUserInfoApi();
  if (result.code === 200) {
    setUserInfo('userInfo', result.data);
  }
};
const changeChildrenCount = (e) => {
  registInfo.childrenCount = e.value[0];
  state.showSelectChildCount = false;
};
// 增加父母身份
const addParents = () => { };

const copy = () => {
  uni.setClipboardData({
    data: registInfo.showId,
    success: function () {
      uni.showToast({
        icon: 'none',
        title: '复制成功'
      });
    }
  });
};
</script>

<style scoped lang="scss">
.page {
  padding-top: 180rpx;

  .radio-group {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    background: white;
    font-size: 24px;
    color: rgba(43, 38, 38, 0.27);
    border-radius: 10px;
    overflow: hidden;

    .radio-item {
      width: 100%;
      height: 100%;
      padding: 20px 0;
      text-align: center;
    }

    .girl {
      background: #ff83bd;
      color: white;
    }

    .boy {
      background: #06b7f9;
      color: white;
    }
  }

  ::v-deep .cus-input {
    background: white;
    padding: 20px 0;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    border-radius: 10px;

    ::placeholder {
      text-align: center;
      font-size: 24px;
    }
  }

  .children-num-bar {
    width: 100%;
    background: #f3f3f3;
    text-align: center;
    color: rgba(43, 38, 38, 0.27);
    font-size: 36rpx;
    height: 96rpx;
    line-height: 96rpx;
    border-radius: 50rpx;
  }

  .student-id-box {
    width: 100%;
    height: 160rpx;
    background: #f4f4f6;
    border-radius: 50rpx;
    margin-top: 60rpx;
    position: relative;

    .student-id {
      font-size: 48rpx;
      font-weight: 500;
      color: #20280f;
    }

    .copy-text {
      position: absolute;
      top: 50%;
      right: 18rpx;
      font-size: 24rpx;
      color: #8db82e;
      background: white;
      width: 152rpx;
      font-size: 28rpx;
      transform: translateY(-50%);
      text-align: center;
      border-radius: 50rpx;
      padding: 15rpx 0;
    }
  }
}
</style>
